<template>
  <el-dropdown 
    trigger="click" 
    placement="bottom-end"
    @command="handleCommand"
    class="theme-dropdown"
  >
    <el-button 
      :icon="currentIcon" 
      circle 
      class="theme-toggle"
      :class="{ 'is-dark': isDark, 'is-auto': isAuto }"
    >
      <el-icon v-if="isAuto" class="auto-icon">
        <Monitor />
      </el-icon>
    </el-button>
    
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item 
          command="light" 
          :class="{ 'is-active': !isDark && !isAuto }"
        >
          <el-icon><Sunny /></el-icon>
          <span>亮色主题</span>
          <el-icon v-if="!isDark && !isAuto" class="check-icon">
            <Check />
          </el-icon>
        </el-dropdown-item>
        
        <el-dropdown-item 
          command="dark" 
          :class="{ 'is-active': isDark && !isAuto }"
        >
          <el-icon><Moon /></el-icon>
          <span>暗色主题</span>
          <el-icon v-if="isDark && !isAuto" class="check-icon">
            <Check />
          </el-icon>
        </el-dropdown-item>
        
        <el-dropdown-item 
          command="auto" 
          :class="{ 'is-active': isAuto }"
          divided
        >
          <el-icon><Monitor /></el-icon>
          <span>跟随系统</span>
          <el-icon v-if="isAuto" class="check-icon">
            <Check />
          </el-icon>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { computed } from 'vue'
import { useThemeStore } from '../store/theme'
import { Sunny, Moon, Monitor, Check } from '@element-plus/icons-vue'

export default {
  name: 'ThemeToggle',
  setup() {
    const themeStore = useThemeStore()
    
    const isDark = computed(() => themeStore.isDark)
    const isAuto = computed(() => themeStore.isAuto)
    const currentTheme = computed(() => themeStore.currentTheme)
    
    const currentIcon = computed(() => {
      if (isAuto.value) return Monitor
      return isDark.value ? Moon : Sunny
    })
    
    const handleCommand = (command) => {
      switch (command) {
        case 'light':
          themeStore.setTheme('light')
          break
        case 'dark':
          themeStore.setTheme('dark')
          break
        case 'auto':
          themeStore.setAutoTheme()
          break
      }
    }
    
    return {
      isDark,
      isAuto,
      currentTheme,
      currentIcon,
      handleCommand,
      Sunny,
      Moon,
      Monitor,
      Check
    }
  }
}
</script>

<style scoped>
.theme-dropdown {
  margin-left: 8px;
}

.theme-toggle {
  transition: all 0.3s ease;
  position: relative;
}

.theme-toggle:hover {
  transform: scale(1.05);
}

.theme-toggle.is-dark {
  background-color: #2d2d2d;
  border-color: #404040;
  color: #e4e7ed;
}

.theme-toggle.is-dark:hover {
  background-color: #404040;
  border-color: #606060;
}

.theme-toggle.is-auto {
  background: linear-gradient(45deg, #409eff, #67c23a);
  color: white;
}

.auto-icon {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  transition: all 0.2s ease;
}

:deep(.el-dropdown-menu__item.is-active) {
  background-color: #409eff;
  color: white;
}

:deep(.el-dropdown-menu__item:hover) {
  background-color: #f5f7fa;
}

:deep(.el-dropdown-menu__item.is-active:hover) {
  background-color: #337ecc;
}

.check-icon {
  margin-left: auto;
  color: white;
}

/* 暗色主题下的下拉菜单样式 */
.dark :deep(.el-dropdown-menu) {
  background-color: #2d2d2d;
  border-color: #404040;
}

.dark :deep(.el-dropdown-menu__item) {
  color: #e4e7ed;
}

.dark :deep(.el-dropdown-menu__item:hover) {
  background-color: #404040;
}

.dark :deep(.el-dropdown-menu__item.is-active) {
  background-color: #409eff;
  color: white;
}
</style>
